<template>
  <div class="hello">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="医生界面"
      style="background-color: #01d99d"
      left-arrow
      border
      @click-left="$router.go(-1)"
      fixed
    />

    <!-- 主题内容 -->
    <div class="content" ref="box">
      <div class="welcome">
        欢迎使用药师咨询服务，专业的执业药师为您提供可靠药用建议，请放心提问
      </div>
      <!-- 聊天部分 -->
      <div class="chat">
        <div v-if="greet">
          <div class="chat_item_user">
            <img src="/images/doctor.png" alt="" />
            <div>{{ greet.first }}</div>
          </div>
          <div class="chat_item_user">
            <img src="/images/doctor.png" alt="" />
            <div>{{ greet.second }}</div>
          </div>
        </div>
        <div v-if="answer.length">
          <div
            class="chat_item"
            v-for="(item, index) in answer"
            :class="{ chat_item_user: item.type == 0 }"
            :key="index"
          >
            <img :src="`/images/${item.type == 1 ? 'user' : 'doctor'}.png`" />
            <div>{{ item.message }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 提问 -->
    <div class="ask">
      <div>
        <input
          id="inputArea"
          type="text"
          v-model="msg"
          placeholder="  详细的描述有助于全面了解你的病情"
          @keydown.enter="sendMsgToServer(msg)"
        />
        <button @click="sendMsgToServer(msg)">提问</button>
      </div>
    </div>
  </div>
</template>

<script>
import Tabber from "../components/Tabber.vue";
import io from "socket.io-client";
const socket = io('ws://101.43.73.49:24000');
// import main from "../main.js"

export default {
  components: { Tabber },
  data() {
    return {
      msg: "",
      greet: null,
      answer: [],
      question: "",
    };
  },
  created() {
    //一定要移除旧的message监听，否则会出现重复监听的状况
    socket.removeListener("message");
    //这是移除所有监听
    socket.removeAllListeners();
    // 接收医生发来的问候
    socket.on("sayHello", (data) => {
      // console.log(data);
      this.greet = data;
    });
    // 接收医生建议
    socket.on("answer", (data) => {
      console.log(data);
      this.answer.push(data);
    });

    // 这是获取对方发来的消息
    socket.on("doctor", (data) => {
      console.log(data);
      this.answer.push(data);
    });
  },
  methods: {
    sendMsgToServer(value) {
      let question = JSON.parse(JSON.stringify(value));
      if (value.length == 0) {
        this.$toast({
          message: "输入内容不能为空",
          position: "bottom",
        });
      } else {
        // type 类型0是用户发送的，1是后台回复的
        this.answer.push({ type: 0, message: question });
        socket.emit("hello", question);
        this.msg = "";
      }
    },
  },
  watch: {
    answer: function () {
      setTimeout(() => {
        this.$nextTick(() => {
          this.$refs.box.scrollTop = this.$refs.box.scrollHeight;
        });
      }, 0);
    },
  },
};
</script>

<style lang="less" scoped>
.hello {
  background-color: #f5f5f5;
  // background-color: green;
}
body {
  overflow: hidden;
}
.van-nav-bar {
  background-color: #1074ff !important;
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
  /deep/ .van-icon-arrow-left {
    color: #fff;
  }
}
.content {
  width: 95%;
  height: calc(100vh - 156px);
  overflow-y: auto;

  margin: 0 auto;
  margin-bottom: 80px;

  .welcome {
    margin-top: 15px;
    margin-bottom: 10px;
    font-size: 2.33vw;
    background-color: #e7e7e7;
    border-radius: 6px;
    padding: 0 10px;
    color: #aaaaaa;
  }
}
.chat {
  .chat_item,
  .chat_item_user {
    margin-bottom: 10px;
    display: flex;
    font-size: 3.8vw;
    align-items: center;
    img {
      width: 11vw;
      height: 100%;
      border-radius: 50%;
      vertical-align: bottom;
    }
    div {
      margin-left: 5px;
      background-color: #fff;
      border-radius: 5px;
      padding: 10px 5px;
    }
  }
  .chat_item_user {
    flex-direction: row-reverse;
    div {
      margin-right: 5px;
      background-color: #1e6eff;
      color: #fff;
    }
  }
}
.ask {
  position: fixed;
  background-color: #fff;
  bottom: 0;
  height: 80px;
  left: 0;
  width: 100%;
  div {
    width: 90%;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    bottom: 10px;
    input {
      width: 80%;
      border-radius: 15px;
      border: 0;
      padding: 6px 5px;
      margin-bottom: 5px;
      vertical-align: middle;
      font-size: 3.75vw;
      background-color: #e7e7e7;
    }
    button {
      border: 0;
      padding: 5px 5px;
      margin-left: 10px;
      outline: none;
      border-radius: 4px;
      background-color: #1074ff;
      color: #fff;
    }
  }
}
</style>